<template>
	<page-meta :page-style="'overflow:'+(data.show?'hidden':'visible')"></page-meta>
	<view class="box" style="padding: 20rpx;">
		<!-- 标题区域 -->
		<view style="text-align: center; font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx;">
			以下是可以预约的医生列表
		</view>

		<!-- 医生列表 -->
		<view v-for="item in data.doctorList" :key="item.id"
			style="margin-bottom: 20rpx; padding: 20rpx; background-color: #f9f9f9; border-radius: 10rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);">
			<!-- Flex 布局，医生信息左侧，按钮右侧 -->
			<view style="display: flex; align-items: center; justify-content: space-between;">
				<!-- 医生信息：头像、职位、姓名 -->
				<view style="display: flex; align-items: center; flex-grow: 1;">
					<image :src="item.avatar" alt="头像"
						style="width: 120rpx; height: 120rpx; border-radius: 50%; object-fit: cover;" />
					<view style="margin-left: 20rpx;">
						<text style="font-size: 38rpx; font-weight: bold; color: #333333;">{{item.name}}</text>
						<text
							style="display: block; font-size: 34rpx; color: #666666; margin-top: 10rpx;">{{item.position}}</text>
					</view>
				</view>

				<!-- 预约按钮 -->
				<button
					style="padding: 10rpx 30rpx; font-size: 28rpx; color: white; background-color: #007aff; border-radius: 5rpx; border: none;"
					@click="handelAddRegisterForm(item)">
					预约挂号
				</button>

			</view>
		</view>


		<!-- 弹窗组件 -->
		<uni-popup ref="popup" type="dialog" @change="change">
			<uni-popup-dialog title="选择预约时间" confirmText="确认" cancelText="取消" @confirm="onDialogConfirm"
				@close="closePopup" mode="input">
				<uni-forms :modelValue="data.form" label-width="200rpx" label-align="right">
					<uni-forms-item label="挂号科室">
						<uni-easyinput type="text" v-model="data.form.position" disabled />
					</uni-forms-item>
					<uni-forms-item label="挂号医生">
						<uni-easyinput type="text" v-model="data.form.name" disabled />
					</uni-forms-item>
					<uni-forms-item label="挂号日期">
						<uni-easyinput type="text" v-model="data.form.registrationDate" disabled />
					</uni-forms-item>
					<!-- 预约就诊日期选择器 -->
					<uni-forms-item label="预约就诊日期">
						<uni-datetime-picker type="datetime" v-model="data.form.visitDateTime"
							:start="currentDateTime" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";

	import {
		getDoctorApi,
		addRegisterFormApi
	} from "../../../utils/api/reserve";

	const data = reactive({
		show: false,
		doctorList: [],
		user: uni.getStorageSync('system-user'),
		form: {
			registrationDate: '', // 挂号日期（当前日期）
			visitDateTime: '', // 预约就诊时间
			doctor: null
		},
	});

	const getCurrentDateTime = () => {
		const currentDate = new Date();
		const year = currentDate.getFullYear();
		const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
		const day = String(currentDate.getDate()).padStart(2, '0');
		const hours = String(currentDate.getHours()).padStart(2, '0');
		const minutes = String(currentDate.getMinutes()).padStart(2, '0');
		const seconds = String(currentDate.getSeconds()).padStart(2, '0');

		// 返回格式化的日期时间字符串 YYYY-MM-DD HH:MM:SS
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};
	const popup = ref(null); // 弹窗的引用
	const currentDateTime = ref(getCurrentDateTime()); // 开始日期
	const endDate = ref('2030-12-31 23:59:59'); // 结束日期

	const load = () => {
		getDoctorApi({}).then(res => {
			if (res.code === '200') {
				console.log(res)
				uni.showToast({
					title: '加载成功',
					icon: 'success',
					duration: 1000
				})
				data.doctorList = res.data?.list
			} else {
				uni.showToast({
					title: '获取失败',
					icon: 'error',
					duration: 1000
				})
			}
		})
	}
	load()

	// 打开弹窗并设置选择的医生
	const handelAddRegisterForm = (doctor) => {
		data.form = {
			registrationDate: '',
			visitDateTime: '',
			doctorId: doctor.id,
			position: doctor.position,
			name: doctor.name,
			status: '等待处理',
			patientId: data.user.id
		};

		// 获取当前日期并格式化为YYYY-MM-DD
		const currentDate = new Date();
		const year = currentDate.getFullYear();
		const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
		const day = String(currentDate.getDate()).padStart(2, '0');

		// 设置 registrationDate 为当前日期
		data.form.registrationDate = `${year}-${month}-${day}`;

		// 打开弹窗
		if (popup.value) {
			popup.value.open();
		}
	};

	// 关闭弹窗
	const closePopup = () => {
		if (popup.value) {
			popup.value.close();
		}
	};

	// 确认选择日期后关闭弹窗
	const onDialogConfirm = () => {
		console.log(data.form)
		if (data.form.visitDateTime) {
			//选择好时间后调用添加挂号接口
			addRegistrationForm()
		} else {
			uni.showToast({
				title: '请选择预约就诊时间',
				icon: 'none',
				duration: 2000
			});
		}
	};
	const change = (e) => {
		data.show = e.show
	};

	const addRegistrationForm = () => {
		addRegisterFormApi(data.form).then(res => {
			if (res.code === '200') {
				uni.showToast({
					title: `预约成功`,
					icon: 'success',
					duration: 2000
				});
				closePopup();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		})
	}
</script>

<style>
	.box {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
	}

	.popup-content {
		width: 80%;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
	}

	.popup-header {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-body {
		margin-bottom: 20px;
	}

	.popup-footer {
		text-align: right;
	}
</style>